<template>
    <div class="task_list_container">
        <div class="task_list">
            <div class="filters">
                <label>选择学生：</label>
                <select v-model="selectedStudentId">
                    <option v-for="student in students" :key="student.student_id" :value="student.student_id">{{
                        student.name }}
                    </option>
                </select>
                <button @click="loadTasks">加载任务</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>任务类型</th>
                        <th>内容标题</th>
                        <th>计划日期</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="task in tasks" :key="task.id">
                        <td>{{ task.task_id }}</td>
                        <td> {{ task.task_type }}</td>
                        <td>{{ task.title }}</td>
                        <td>{{ task.plan_date }}</td>
                        <td>{{ task.status ? '已完成' : '未完成' }}</td>
                        <td class="action-buttons">
                            <button @click="toggleTaskStatus(task)">{{ task.status ? '标记未完成' : '标记完成' }}</button>
                            <button @click="deleteTask(task.task_id)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ApiService } from '@/api/apiService';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

// 学生数据
const students = ref([]);
const student_ids = ref([]);
// 初始化数据
async function fetchItems() {
    try {
        const userId = userStore.getUser?.user_id;
        if (!userId) throw new Error('User ID not found');

        const response = await ApiService.getStudentsList(userId);
        console.log('获取学生列表成功:', response.data.code);
        if (response.data.code === 200) {
            students.value = response.data.data;
            student_ids.value = response.data.data.map(student => student.student_id);

            // 设置默认选中第一个学生
            if (students.value.length > 0) {
                selectedStudentId.value = students.value[0].student_id;
            }
            loadTasks();
        } else {
            console.error('获取学生列表失败:', response.data);
        }
    } catch (error) {
        console.error('error:', error);
    }
}

onMounted(() => {
    fetchItems();
});

// 选中的学生ID
const selectedStudentId = ref(1);

// 模拟任务数据
const tasks = ref([]);

// 加载任务
const loadTasks = async () => {
    const response = await ApiService.get_tasks(selectedStudentId.value);
    if (response.data.code === 200) {
        tasks.value = response.data.data;
    } else {
        console.error('获取任务列表失败:', response.data);

    }
};

// 切换任务状态
const toggleTaskStatus = async (task) => {
    task.status = !task.status;
    const response = await ApiService.update_task_status(task.task_id,);
    if (response.data.code === 200) {
        loadTasks();
    } else {
        console.error('更新任务状态失败:', response.data);
    }
};

// 删除任务
const deleteTask = async (id) => {
    const response = await ApiService.delete_task(id);
    if (response.data.code === 200) {
        loadTasks();
    } else {
        console.error('删除任务失败:', response.data);
    }
};
</script>

<style scoped>
    @import url("@/assets/css/task_list.css");
</style>